<template>
	<view class="dashboard-container">
		<uv-navbar @leftClick="goBack" bgColor="rgba(0,0,0,0)"></uv-navbar>
		<!-- 用户信息区 -->
		<view class="content">
			<view class="user-info">
				<view class="avatar-container">
					<img src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/f4061202508161629496486.png" alt="用户头像" class="avatar">
				</view>
				<view class="user-details">
					<uv-text text="小猫打怪兽" size="36rpx" bold="true" />
				</view>
			</view>
			<view class="board">
				<view class="storage-info">
					<view class="storage-left"><img src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/236bc202508161113199047.png" class="storage-img">剩余空间</view>

					<view>43.53Gb/50Gb</view>
				</view>
				<!-- 数据统计区 -->
				<view class="stat">
					<uv-grid :border="false" col="4">
						<uv-grid-item class="item">
							<uv-text text="2" color="#333" size="24rpx" bold="true" align="center" />
							<uv-text text="门店总数" color="#333" size="24rpx" align="center" />
						</uv-grid-item>
						<uv-grid-item class="item">
							<uv-text text="1" color="#333" size="24rpx" bold="true" align="center" />
							<uv-text text="剩余门店数量" color="#333" size="24rpx" align="center" />
						</uv-grid-item>
						<uv-grid-item class="item">
							<uv-text text="100" color="#333" size="24rpx" bold="true" align="center" />
							<uv-text text="总剪辑数" color="#333" size="24rpx" align="center" />
						</uv-grid-item>
						<uv-grid-item class="item">
							<uv-text text="56" color="#333" size="24rpx" bold="true" align="center" />
							<uv-text text="剩余剪辑条数" color="#333" size="24rpx" align="center" />
						</uv-grid-item>
					</uv-grid>
				</view>
			</view>

			<view class="card">
				<view class="name">
					<lst-title title="控制中心" more="" bold="bold" />
				</view>

				<view class="nav">
					<uv-grid :border="false" col="5">
						<uv-grid-item class="item" v-for="(item, index) in controlCenter" :key="item.name" @click="btnClick(index)">
							<uv-icon :name="item.icon" size="50rpx" color="#333" class="icon" />
							<uv-text :text="item.name" color="#333" size="24rpx" align="center" />
						</uv-grid-item>
					</uv-grid>
				</view>
			</view>

			<view class="card">
				<view class="name">
					<lst-title title="管理" more="" bold="bold" />
				</view>

				<view class="nav">
					<uv-grid :border="false" col="5">
						<uv-grid-item class="item" v-for="item in management" :key="item.name">
							<image :src="item.icon" mode="aspectFit" class="icon" />
							<uv-text :text="item.name" color="#333" size="24rpx" align="center" />
						</uv-grid-item>
					</uv-grid>
				</view>
			</view>

			<view class="card">
				<view class="name">
					<lst-title title="学习中心" more="" bold="bold" />
				</view>

				<view class="nav">
					<uv-grid :border="false" col="5">
						<uv-grid-item class="item" v-for="item in learningCenter" :key="item.name">
							<image :src="item.icon" mode="aspectFit" class="icon" />
							<uv-text :text="item.name" color="#333" size="24rpx" align="center" />
						</uv-grid-item>
					</uv-grid>
				</view>
			</view>
			<!-- 底部更新提示 -->
			<view class="update-notice">
				<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/6521c202508161112395875.png" />工作日8点半-9点进行数据更新，上次更新时间为：2025-06-01
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const controlCenter = ref([{
        name: '门店管理',
        icon: 'home-fill',
        iconType: 'uv-icon'
    },
    {
        name: '剪辑管理',
        icon: 'movie',
        iconType: 'uv-icon'
    },
    {
        name: 'NFC营销',
        icon: 'scan',
        iconType: 'uv-icon'
    },
    {
        name: '红包管理',
        icon: 'red-packet',
        iconType: 'uv-icon'
    }
]);

const goBack = () => {
    uni.navigateBack()
}

const btnClick = (index) => {
    if (index == 0) {
        // 门店管理
        uni.navigateTo({
            url: '/pages-nfc/store'
        })
    } else if (index == 1) {
        // 剪辑管理 - 暂未实现
        uni.showToast({
            title: '功能开发中',
            icon: 'none'
        })
    } else if (index == 2) {
        // NFC营销
        uni.navigateTo({
            url: '/pages-nfc/marketing-intro'
        })
    } else if (index == 3) {
        // 红包管理 - 暂未实现
        uni.showToast({
            title: '功能开发中',
            icon: 'none'
        })
    }
}
</script>

<style scoped>
	.dashboard-container {
		height: 100vh;
		background: url('https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0811/24a75202508111138097006.jpg') no-repeat;
		background-size: 100% 100%;
    }
	.content {
		z-index: 2;
		padding: 80rpx 30rpx 30rpx 30rpx;
		position: relative;
	}

	.nav {
		background: transparent;
	}

	.board {
		background: url('https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0811/1a1b4202508111138549615.png') no-repeat;
		background-size: 100% 100%;
		height: 90px;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.avatar-container {
		margin-right: 20px;
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		object-fit: cover;
	}

	.user-details {
		margin: 0 0 10px 0;
		color: #333;
	}

	.storage-info {
		display: flex;
		justify-content: space-between;
		color: #96632c;
		padding: 0 15px;
		align-items: center;
		font-weight: 600;
		line-height: 30px;
    }
	
	.storage-left {
		display: flex;
		align-items: center;
	}
	.storage-img {
		width: 16px;
		height: 16px;
		margin-right: 10px;
	}

	.stat {
		padding-top: 12px;
    }
	.nav {
		padding: 0 16rpx;
	}
	.item {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.card {
		overflow: hidden;
		margin-top: 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
    }
	.name {
		padding: 30rpx;
		padding-bottom: 20rpx;
	}
	
	.nav {
		padding: 0 16rpx;
	}
	.item {
		margin-bottom: 30rpx;
	}

	.icon {
		display: block;
		margin: 0 auto;
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
	}

	.update-notice {
		display: flex;
		align-items: center;
		font-size: 12px;
    }
	
	
	.update-notice image {
		width: 16px;
		height: 16px;
		margin-right: 10px;
	}
</style>
